<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>加中商城</title>
  <!-- 引入ElementUI的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    /*
        设置body样式

    */
    body{
      margin: 0px;/*设置上下左右空白距离为0*/
    }
    /*
        设置index-container  div样式
    */
    .index-container{
      margin: 0 auto;/*设置div居中*/
      width: 85%;/*设置宽度,使用百分比设置*/
      min-width: 1024px;/*设置最小宽度*/
    }



    /*
        ElementUI提供的样式
        设置el-header，el-footer两个标签的样式

    */
    .el-header, .el-footer {
      background-color: #606266;
      color: #333;
      line-height: 60px;
    }

    .el-header{
      background-color: lightblue;
      display: flex;
    }

    .el-footer{
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      font-family: 宋体;
      letter-spacing: 3px;
      color: white;

    }

    .el-header .logo{
      border: 0px solid red;
      width: 50%;
      height: 100%;
      padding-left: 50px;
    }

    .logo span{
      margin-top:-30px;
      position: relative;
      top:-17px;
      display: inline-block;
      border: 0px solid red;
      height: 100%;
      line-height: 60px;
      font-size: 30px;
      font-weight: bold;
    }

    .el-header .user_info{
      border: 0px solid blue;
      width: 50%;
      height: 100%;
      text-align: right;
      padding-right: 30px;
    }
    /**
      ElementUI提供的样式
      设置el-main样式
     */
    .el-main {
      /*background-color: #E9EEF3;*/
      color: #333;
    }






    a:link{
      text-decoration: none;
      color: dodgerblue;
      font-weight: bold;
    }
    a:visited{
      text-decoration: none;
      color: dodgerblue;
      font-weight: bold;
    }
    a:hover{
      color: red;
      font-weight: bold;
    }







  </style>

</head>
<body>
<div id="index-container" class="index-container">

  <el-container>
    <el-header>
      <div class="logo">
        <a href="/toyshopping">
          <img src="/toyshopping/images/logo.png" style="height:60px ">
        </a>
        <span>童趣玩具店</span>
      </div>
      <div class="user_info" >
        <!--
            v-if:vue的if指令
            当v-if为true时显示当前标签，为false不显示当前标签
        -->
        <div class="user_operate" v-if="curUser==null">
          <a href="register.html">用户注册</a>
          <a href="login.html">用户登录</a>
        </div>

        <div class="user_info_div" v-if="curUser!=null">
                        <span style="margin-right:10px">
                            <label style="color: red">欢迎您:</label>
                            <label style="color: blue">{{curUser.user_name}}</label>
                        </span>

          <el-button type="danger" plain size="mini" @click="exit">退出</el-button>
        </div>

      </div>
    </el-header>
    <!--商品信息展示区-->
    <el-main>
      <div style="margin-bottom: 20px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>
            <a href="/toyshopping">首页</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <a href="/toyshopping/car/showCar.html">购物车</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item>确认购买</el-breadcrumb-item>

        </el-breadcrumb>
      </div>

      <div>
        <h2>填写收货人信息:</h2>
        <el-form :inline="true" :model="order" class="demo-form-inline">

          <el-form-item label="收货人姓名">
            <el-input v-model="order.order_to_name" placeholder="收货人姓名"></el-input>
          </el-form-item>

          <el-form-item label="收货人地址">
            <el-input v-model="order.order_to_address" placeholder="收货人地址"></el-input>
          </el-form-item>

          <el-form-item label="收货人联系方式">
            <el-input v-model="order.order_to_phone" placeholder="收货人联系方式"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <el-table
              :data="carList"
              border
              style="width: 100%"
              align="center">

        <el-table-column
                type="index"
                label="序号"
                width="180"
                align="center">
        </el-table-column>

        <el-table-column
                prop="toy_name"
                label="商品名称"
                width="180"
                align="center">
        </el-table-column>

        <el-table-column
                prop="toy_image"
                label="商品图片"
                align="center">
          <template slot-scope="scope">
            <img :src="'/toyshopping/images/toys/'+scope.row.toy_image" width="100%" height="100%"/>

          </template>
        </el-table-column>


        <el-table-column
                prop="toy_price"
                label="单价"
                align="center">
        </el-table-column>


        <el-table-column
                prop="car_count"
                label="购买数量"
                align="center">

        </el-table-column>

        <el-table-column
                prop="total"
                label="合计"
                align="center">
        </el-table-column>



      </el-table>
      <div style="text-align: right;margin: 10px">
        <label style="font-size: 26px;font-weight: bold">总价:</label>
        <label style="font-size: 26px;font-weight: bold;color: red;margin-right: 10px">¥{{order.order_total_price}}</label>
        <el-button type="warning" @click="buy">确认购买</el-button>
      </div>




    </el-main>
    <el-footer>童趣玩具店所有</el-footer>
  </el-container>

</div>

<script src="/toyshopping/js/vue.min.js"></script>
<script src="/toyshopping/js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/toyshopping/js/sweetalert2.js"></script>
<script src="/toyshopping/js/qs.js"></script>
<script>
  /**
   * 创建Vue对象，并对vue进行配置
   * 在vue的构造器中配置
   */
  new Vue({
    //用于配置vue要渲染的元素,在el指定的元素中vue可以起作用,脱离指定元素，vue无效,vue的渲染元素可以为任意元素，一般是div
    el:'#index-container',
    data(){//vue的数据区，等同于java类中的属性
      return{
        curUser:null,//当前登录者对象
        carList:[],
        car_ids:[],//当前选中购物车中商品的购物车编号
        //订单对象
        order:{
          order_total_price:0,//选择商品的总价格
          orderDescs:[]//购买的商品列表，列表中的对象包含两个属性book_id,count
        }
      }
    },
    methods:{//vue的方法区,在方法区中定义方法，这些方法类似与java中的方法
      /**
       * 获得当前登录者信息
       */
      getCurUser(){
        //从sessionStorage中获得curUser的值，值为一个字符串
        let curUserStr = window.sessionStorage.getItem("curUser");
        if(curUserStr){
          //将JSON格式的字符串解析为一个JSON对象
          this.curUser = JSON.parse(curUserStr);
          // console.log(this.curUser.user_name);
        }

      },
      /**
       * 退出登录
       */
      exit(){
        //使用ajax向服务端发送退出请求
        axios.delete('user/exit')
                .then(response=>{
                  let result = response.data;
                  if(result.success){
                    //将浏览器的sessionStorage中存储的用户登录信息移除
                    window.sessionStorage.removeItem("curUser");//根据key移除对应的属性
                    //使用ElementUI的弹框组件实现
                    this.$message({
                      message: result.message,
                      type: 'success',
                      duration:500,//设置延迟关闭时间(毫秒)
                      onClose:()=>{//当弹框关闭后要执行的函数
                        this.curUser = null;//重置curUser对象为null
                      }
                    });
                  }
                })
                .catch(err=>{
                  alert(err);
                });
      },


      /**
       * 获得超链接传入的参数值
       */
      getParam(){
        let url = location.search;//获得超链接中的参数
        url = url.substring(1);//去掉url中的?号
        let params = url.split("=");//使用=分割参数
        //由于前端传入的是一个使用逗号","分割的多个数据的字符串，所以此处要使用","将这个字符串拆分为数组
        this.car_ids = params[1].split(",");
        console.log(this.car_ids);//获得参数的值
      },
      /**
       * 获得要购买的商品的信息
       */
      getPayCarList(){
        axios.get('getPayCarList',{params:
                  {
                    car_ids: this.car_ids
                  },paramsSerializer: params => {//对get请求的参数进行序列化
            return Qs.stringify(params, { indices: false })
          }
        })
                .then(response=>{
                  this.carList = response.data;
                  //核算总价格
                  for(let carInfo of this.carList){
                    this.order.order_total_price = this.order.order_total_price + carInfo.total;
                    //获得要购买的商品的商品编号和数量并添加数组中
                    this.order.orderDescs.push({
                      toy_id:carInfo.toy_id,
                      count:carInfo.car_count
                    })
                  }



                })
                .catch(err=>{
                  alert(err);
                });
      },
      buy(){
        axios.post('/toyshopping/orders/addOrder',this.order)
                .then(response => {
                  let result = response.data;
                  if(result.success){
                    //使用sweetalert2弹框组件，弹框
                    Swal.fire({
                      icon: 'success',//图标
                      title: result.message,//消息
                      showConfirmButton: false,//不显示确认按钮
                      timer: 1000,//延迟时间
                      willClose:()=>{//当弹框关闭时执行的函数
                        location.href="/toyshopping/car/showCar.html";//跳转到购物车页面
                      }
                    });

                  }
                })
                .catch(err=>{
                  alert(err);
                });
      }

    },
    created(){/*在页面加载后自动执行*/

    },
    mounted(){/*DOM结构在内存中构建前执行*/
      this.getCurUser();//获得当前登录者信息
      this.getParam();//获得传入的参数



      this.getPayCarList();


    }
  });
</script>
</body>
</html>